<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Chat Room</title>
    <style>
        #chatbox { height: 300px; overflow-y: scroll; border: 1px solid black; padding: 10px; }
    </style>
</head>
<body>
<div id="chatbox"></div>
<input type="text" id="message" placeholder="Type your message here...">
<button onclick="sendMessage()">Send</button>

<script>
    var socket = new WebSocket('ws://localhost:8080/chat');

    socket.onopen = function(event) {
        console.log('Connected to server');
    };

    socket.onmessage = function(event) {
        var chatbox = document.getElementById('chatbox');
        chatbox.innerHTML += '<p>' + event.data + '</p>';
        chatbox.scrollTop = chatbox.scrollHeight;
    };

    socket.onclose = function(event) {
        console.log('Disconnected from server');
    };

    function sendMessage() {
        var message = document.getElementById('message').value;
        if (message.trim() !== '') {
            socket.send(message);
            document.getElementById('message').value = '';
        }
    }
</script>
</body>
</html>
